<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
    <style>
        ul {
            list-style-type: none;
        }

        li {
            width: 100px;
            height: 30px;
            background-color: yellowgreen;
            font-size: 10px;
            text-align: center;
            line-height: 30px;
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>

<!--
   条件渲染
     v-if    true  false
        1. 实现方案    通过添加和删除节点的形式
     v-show  true  false
        1.  实现方案   通过添加css样式  display:none

    v-if   vs   v-show
    v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
    因此，如果需要非常频繁地切换，则使用 v-show 较好；
    如果在运行时条件很少改变，则使用 v-if 较好


    v-if  分支结构
    v-else  使用v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别  双分支
    v-else-if   多分支   类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后
-->
<div id="app">


    <div v-if="Math.random() > 0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>

    <ul>
        <li v-if="roleId==1">用户管理</li>
        <li v-if="roleId==1">角色管理</li>
        <li v-show="roleId==2">学生管理</li>
    </ul>

    <!-- 多分支-->
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>


</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            //  roleId  1  管理员   2 教师
            roleId: 1,
            type:'B'
        },
        methods: {}
    })
</script>

</body>
</html>
